<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css/common.css">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">
</head>
<body>
  <h3>留言</h3></h3>
  <form action="/say" method="post">
    <input type="text" name='content' id='content'>
    <button type="submit" id='submit'>提交</button>
  </form>
  <div class="container" style="width: 600px;">
    <ul  class="list-group">
      <li class='shadow-sm p-3 bg-white rounded text-primary'>
        <div class="float-left">内容</div>
        <div class="float-right">留言时间</div>
      </li>
    </ul>
    <ul class="list-group" id='conent-list-wrapper'>
      
    </ul>
  </div>
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
  <script>

    getListData()

    function getListData() {
      $.ajax({
        url: '/getAllLiuYan',
        type: 'get',
        success(res) {
         
          if(res.code === 0) {
            let str = ''
            res.list.forEach(p=> {
              str += `<li class="list-group-item">
                <div class='float-left'>${p.content}</div>  
                <div class='float-right'>
                  <span class="badge badge-light">${p.createTime}</span>
                  <button class='btn btn-danger del-btn' data-uuid='${p.uuid}'>删除</button>
                </div>
              </li>`
            })

            $("#conent-list-wrapper").append(str)
          }
        },
        error(error) {

        }
      })
    }

    $('#submit').on('click',e=> {
      e.preventDefault()
      $.ajax({
        url: '/say',
        method: 'POST',
        data: {
          content: $("#content").val()
        },
        success(res) {
          console.log('成功')
          console.log(res)
          $("#conent-list-wrapper").empty()
          getListData()
        },
        error() {

        }
      })

    })

    $(".list-group").on('click',".del-btn" ,(event)=> {
      let uuid = event.target.getAttribute('data-uuid')

      $.ajax({
        url: '/delLiuYan?uuid='+uuid,
        method: 'delete',
        success(res) {
          console.log(res)

          $("#conent-list-wrapper").empty()
          getListData()
        }
      })
    })
  </script>
</body>
</html>